<script setup>
import { onMounted } from 'vue';
import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';


onMounted(() => {
  new Swiper('.mySwiper', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
    },
  });
});
</script>

<template>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1">Slide 1</div>
      <div class="swiper-slide slide2">Slide 2</div>
      <div class="swiper-slide slide3">Slide 3</div>
      <div class="swiper-slide slide4">Slide 4</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<style scoped>
.swiper {
  width: 90vw;
  height: 40vh;
  border: 1px solid red;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #f6d6d6;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide1 { background-color: #f6d6d6; }
.slide2 { background-color: #d6f6e1; }
.slide3 { background-color: #d6e1f6; }
.slide4 { background-color: #f6f1d6; }

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>